<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>特殊学生</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serch">
        <el-input style="max-width: 600px" placeholder="输入搜索信息" v-model.trim="serchinfo">
            <template #prepend>
                <el-select placeholder="选择信息" v-model="select" style="width: 115px">
                    <el-option label="教师工号" value="teacher.teacherid" />
                    <el-option label="姓名" value="teacher.name" />
                    <el-option label="专业" value="submajor.name" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="seach"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </template>
        </el-input>
        <div class="info" v-if="teacherlist.length != 0">
            <el-descriptions title="特殊教师信息" border align="center">
                <el-descriptions-item :rowspan="2" :width="140" label="Photo" align="center">
                    <el-image style="width: 100px; height: 100px"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                </el-descriptions-item>
                <el-descriptions-item label="教师工号" align="center">{{ teacherlist[activeindex].teacherid
                    }}</el-descriptions-item>
                <el-descriptions-item label="姓名" align="center">{{ teacherlist[activeindex].name
                    }}</el-descriptions-item>
                <el-descriptions-item label="专业" align="center">{{ teacherlist[activeindex].major_name
                    }}</el-descriptions-item>
                <el-descriptions-item align="center" label="开始时间">
                    {{ teacherlist[activeindex].create_time }}
                </el-descriptions-item>
                <el-descriptions-item align="center" span="3" label="特殊去向">
                    {{ teacherlist[activeindex].reson }}
                </el-descriptions-item>

                <el-descriptions-item align="center" label="预计结束">
                    {{ teacherlist[activeindex].end_time ? teacherlist[activeindex].end_time : '等待确认' }}
                </el-descriptions-item>
                <el-descriptions-item align="center" label="操作" v-if="userstore.userinfo.roleid==1">
                    <el-button type="primary" size="small">编辑</el-button>
                </el-descriptions-item>

            </el-descriptions>
            <el-button type="primary" size="small" @click="next">下一个</el-button>
        </div>
        <div v-else>
            <el-empty :image-size="200" />
        </div>
    </div>

</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { specialteacher,seachspecialteacher} from '@/apis/teacher'
import { ElMessage } from 'element-plus'
// @ts-ignore
import { Userstore } from '@/stores/user.js';
const userstore = Userstore()
const serchinfo = ref<string>('')
const select = ref<string>('')
const activeindex = ref(0)
const teacherlist = ref<any>([])
const getspecialteacher = async () => {
    const res = await specialteacher()
    teacherlist.value = res.data.data
}
const next = () => {
    if (activeindex.value >= teacherlist.value.length - 1) return ElMessage({ type: 'warning', message: '暂无其他老师' })
    activeindex.value++
}
const seach=async()=>{
     if (serchinfo.value == '' || select.value == '') return ElMessage({ type: 'warning', message: '请输入搜索的值' })
    const res = await seachspecialteacher({ condition: select.value, val: serchinfo.value })
    teacherlist.value = res.data.data
}
onMounted(() => {
    getspecialteacher()
})
</script>
<style lang='scss' scoped>
.serch {
    margin-top: 15px;

    .el-button {
        color: #fff;
        background-color: #43a0ff;
    }
}
</style>